<template>
  <view class="container">
    <!-- 状态切换栏 -->
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <view 
        v-for="(order, index) in filteredOrders" 
        :key="index" 
        class="order-card"
      >
        <view class="order-header">
          <view class="order-type">
            <text class="type-tag">拼团</text>
            <text class="order-id">拼团编号：{{ order.orderId }}</text>
          </view>
          <text class="order-status" :class="order.statusClass">{{ order.statusText }}</text>
        </view>

        <view class="order-content">
          <image class="product-image" :src="order.image" mode="aspectFill"></image>
          <view class="order-info">
            <text class="product-name">{{ order.productName }}</text>
            <text class="product-desc">{{ order.description }}</text>
            
            <view class="order-details">
              <view class="detail-item">
                <text class="detail-label">出发城市：</text>
                <text class="detail-value">{{ order.departCity }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">目的城市：</text>
                <text class="detail-value">{{ order.arriveCity }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">出行时间：</text>
                <text class="detail-value">{{ order.travelDate }}</text>
              </view>
              <view class="detail-item" v-if="order.flightInfo">
                <text class="detail-label">航班信息：</text>
                <text class="detail-value">{{ order.flightInfo }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="order-footer">
          <view class="member-info">
            <text class="member-count">{{ order.memberCount }}人团</text>
            <text class="create-time">创建时间: {{ order.createTime }}</text>
          </view>
          <view class="action-buttons">
            <button 
              class="action-btn"
              :class="{ primary: action.isPrimary }"
              v-for="(action, idx) in order.actions" 
              :key="idx"
              @click="handleAction(action.type, order)"
            >{{ action.text }}</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: ['全部', '待付款', '待成团', '处理中', '已完成', '已失效'],
      orders: [
        {
          orderId: 'PT202403150001',
          statusText: '待成团',
          statusClass: 'status-pending',
          image: '/static/images/product-1.jpg',
          productName: '首尔3天2晚团体落地签',
          description: '标准团签 | 3-5工作日出签',
          departCity: '上海',
          arriveCity: '首尔',
          travelDate: '2024-04-15',
          flightInfo: 'MU5042 13:25-16:40',
          createTime: '2024-03-15 10:23',
          memberCount: 5,
          status: 'pending',
          actions: [
            { text: '邀请好友', type: 'invite', isPrimary: true },
            { text: '取消拼团', type: 'cancel', isPrimary: false }
          ]
        },
        // 可以添加更多订单数据...
      ]
    }
  },
  computed: {
    filteredOrders() {
      if (this.currentTab === 0) return this.orders;
      const statusMap = ['all', 'unpaid', 'pending', 'processing', 'completed', 'expired'];
      return this.orders.filter(order => order.status === statusMap[this.currentTab]);
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    handleAction(type, order) {
      switch(type) {
        case 'invite':
          // 处理邀请逻辑
          uni.showToast({
            title: '邀请链接已复制',
            icon: 'none'
          });
          break;
        case 'cancel':
          // 处理取消拼团逻辑
          uni.showModal({
            title: '提示',
            content: '确定要取消该拼团吗？',
            success: (res) => {
              if (res.confirm) {
                // 执行取消拼团操作
              }
            }
          });
          break;
      }
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(135deg, #f5f7fa 0%, #e4ecfb 100%);
}

.status-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 20rpx 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  border-radius: 0 0 20rpx 20rpx;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  position: relative;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active .tab-text {
  color: #4A90E2;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #4A90E2;
  border-radius: 2rpx;
}

.order-list {
  padding: 30rpx;
  height: calc(100vh - 120rpx);
  box-sizing: border-box;
  width: 100%;
}

.order-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease;
}

.order-card:active {
  transform: scale(0.98);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-type {
  display: flex;
  align-items: center;
}

.type-tag {
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 6rpx;
  margin-right: 16rpx;
}

.order-id {
  font-size: 24rpx;
  color: #999;
}

.order-status {
  font-size: 26rpx;
}

.status-pending {
  color: #FF9800;
}

.order-content {
  display: flex;
  margin-bottom: 20rpx;
}

.product-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.order-details {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.detail-item {
  display: flex;
  margin-bottom: 6rpx;
}

.detail-label {
  color: #999;
  margin-right: 10rpx;
  min-width: 120rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.member-info {
  display: flex;
  flex-direction: column;
}

.member-count {
  font-size: 24rpx;
  color: #999;
  background: rgba(153, 153, 153, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.create-time {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.action-btn {
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(74, 144, 226, 0.3);
  color: #666;
  transition: all 0.3s ease;
  margin-left: 10rpx;
  min-width: 120rpx;
  text-align: center;
}

.action-btn.primary {
  background: rgba(74, 144, 226, 0.8);
  color: white;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
}

.action-btn.primary:active {
  background: rgba(74, 144, 226, 1);
  transform: translateY(2rpx);
}
</style> 